<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="f"   uri="http://www.ddjd.com/functions" %>
<%@taglib prefix="fn"  uri="http://java.sun.com/jsp/jstl/functions" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style type="text/css">
			.mySpan {
				padding: 10px 10px;
			}
			

			.green {
				color: white;
				font-weight: bold;
			}
			
			.red11 {
				color: #ffffff!important;;
			    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)!important;
			    background-color: red!important;
			    background-image: linear-gradient(to bottom, red, red)!important;
			    background-repeat: repeat-x!important;
			    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)!important;
			}
			
			.yellow {
				background: yellow;
			}
			
			.green11 {
				color: #ffffff!important;
			    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)!important;
			    background-color: green!important;
			    background-image: linear-gradient(to bottom, #0088cc, green)!important;
			    background-repeat: repeat-x!important;
			    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)!important;
			}
			
			
			
			 table.table {
                font-family: verdana,arial,sans-serif;
                font-size:11px;
                color:#333333;
                border-width: 1px;
                border-color: #666666;
                border-collapse: collapse;
            }
            table.table th {
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                font-size:14px;
                border-color: #666666;
                background-color: #dedede;
                line-height:20px;
            }
            table.table td {
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                border-color: #666666;
                background-color: #ffffff;
                line-height:18px;
            }
		</style>
		
		
		
		
    
   
   
    
  
  
    
       <link type="text/css" rel="stylesheet" href="${ctx}/js/gpoint/rdp/zone/css/bootstrap.css">

<script type="text/javascript" src="${ctx}/js/gpoint/rdp/zone/bootstrap-paginator.js"></script>
<script type="text/javascript" src="${ctx}/js/gpoint/rdp/TimeSegment/timeSeg.js"></script>


     <%@include file="/commons/page/codegen.jsp"%>
<%--     <link href="${ctx}/js/gpoint/rdp/zone/css/bootstrap.min.css" rel="stylesheet" /> --%>
    <link href="${ctx}/js/gpoint/rdp/zone/css/bootstrap-duallistbox.min.css" rel="stylesheet" />
    
   <script src="${ctx}/js/gpoint/rdp/zone/jquery-3.0.0.min.js"></script>
    <script src="${ctx}/js/gpoint/rdp/zone/bootstrap.min.js"></script>
    <script src="${ctx}/js/gpoint/rdp/zone/jquery.bootstrap-duallistbox.js"></script>
       <link type="text/css" rel="stylesheet" href="${ctx}/js/gpoint/rdp/zone/css/bootstrap.css">

 <script type="text/javascript" src="${ctx}/js/plugins/json/json2.min.js" ></script>
    <script type="text/javascript" src="${ctx}/js/websocket/sockjs.min.js"></script>
    <script type="text/javascript" src="${ctx}/js/websocket/stomp.min.js"></script>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>总控制台</title>
    <!-- 导入easyui类库 -->
    <link rel="stylesheet" type="text/css" href="${ctx}/js/monitoring/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/js/monitoring/themes/icon.css">
    <script type="text/javascript" src="${ctx}/js/plugins/jquery/jquery.min.js"></script>
    <!-- 导入jquery核心类库 -->
    <script type="text/javascript" src="${ctx}/js/plugins/jquery/plugins/jquery.easyui.min.js"></script>
     <script type="text/javascript" src="${ctx}/js/gpoint/rdp/monitoring/monitoring.js"></script>
    <script type="text/javascript">
    var url = '${ctx}';

   var address='${address}';
    
   //alert(address);
    console.log(address);
    var trlisthtml = $("#trlist").html();//获取默认的一行tr，用作复制
    
    function gettable(str){
    	
    
    	
    	//alert(typeof(str));
    	//alert(str);
       //有效性判断
       if(str=="error" || str=="close" ){
    	   alert("获取监控数据失败！");
       }else{
    	   
    	   //过滤字符
    	   if(str=="open"){
    		     
    	   }else{
    		   //解析数据
 	   	      //  var str="执行时间:2019-10-27 16:23:05	end描述:1门进门	end卡号:2671322345	end状态:刷卡禁止通过: 没有权限	end";
 	   	       var strs = new Array(); //定义一数组
 	   	      strs = str.split("end"); //字符分割
 	 
 	   	 
 	   	      //单行赋值
 		   	  var tr="<tr>" ; 
 		   	  for (i=0; i<strs.length; i++ ){
 		       // alert(strs[i]+"<br/>"); //分割后的字符输出
 		         //  $("#"+"text"+(i+1)).val(strs[i]);
 		       
 		           //过滤特殊字符
 		         strs[i]= strs[i].replace("执行时间:","");
 		        strs[i]=strs[i].replace("描述:","");
 		        strs[i]=strs[i].replace("卡号:","");
 		        strs[i]=strs[i].replace("状态:","");
 		        var td="<td>"+strs[i]+"</td>";
 		        tr = tr+td;
 		      }
 	   	      tr = tr+"</tr>";
 	          $("#trlist").append(tr);
 	       }
    	  }
    }
    
    //執行Env 
    $(function(){
    	// var _ctx="http://127.0.0.1:8083";
    	 var  context=address;
    	    var userArr = ["111","222"]; //控制器SN号，门号
    	        var map ={};
    			map.useArr = userArr;
    	    //远程开门事件
    	 $("#bt7").click(function(){
	    		   var doorArr = getvalue();
	    		   var map ={};
	    		   map.doorArr = doorArr;
	    		   $.ajax({
		    	         	type: "post",
		    	         	   url: context+"/remoteByArray",
		    	         	    contentType: "application/json;charset=utf-8;",
		    	         	  data:JSON.stringify(map),
		    	         	  dataType:"json",//注意不是datatype哦
		    	         	    async: false,//使用同步操作，否则init方法执行时setting可能还未被赋值
		    	         	   success: function(data) {
		    	         	          
		    	         	 
				    	         	console.log(data);
			    	         		
		    	         		    if(data.code==200){
		    	         		    	alert("远程开门成功！");
		    	         		    }else{
		    	         		    	alert("远程开门异常！");
		    	         		    }
		    	         	  },
		    	         	 error: function(){
		    	         		  alert("远程开门失败！");
		    	              }
		    	         	 });
		    	         	 //end
    	    });
    	 
    	    //时间校准：
    	     $("#bt5").click(function(){
	    		   var doorArr = getvalue();
	    		   var map ={};
	    		   map.doorArr = doorArr;
	    		   $.ajax({
		    	         	   type: "post",
		    	         	   url: context+"/calibrationTime",
                               contentType: "application/json;charset=utf-8;",
		    	         	   data:JSON.stringify(map),
                               dataType:"json",//注意不是datatype哦
		    	         	   async: false,//使用同步操作，否则init方法执行时setting可能还未被赋值
		    	         	   success: function(data) {
		    	         		 
		    	         		console.log(data);
		    	         		
	    	         		    if(data.code==200){
	    	         		    	 alert("时间校准成功！");
	    	         		    }else{
	    	         		    	alert("时间校准异常！");
	    	         		    }

	    	         		    
		    	         	     
		    	         	  },
		    	         	 error: function(){
		    	         		  alert("时间校准失败！");
		    	              }
		    	         	 });
		    	         	 //end
    	    });
    	    
    	    
    	    
    	   //检测控制器
    	     $("#bt4").click(function(){
                   var doorArr = getvalue();
	    		   var map ={};
	    		   map.doorArr = doorArr;
	    		   $.ajax({
		    	         	  type: "post",
                              url: context+"/checkController",
                              contentType: "application/json;charset=utf-8;",
		    	         	  data:JSON.stringify(map),
		    	         	  dataType:"json",//注意不是datatype哦
                              async: false,//使用同步操作，否则init方法执行时setting可能还未被赋值
		    	         	   success: function(data) {
		    	         		 
		    	         		 console.log(data);
		    	         		    if(data.code==200){
		    	         		    	 alert("检测控制器成功！");
		    	         		    }else{
		    	         		    	alert("检测控制器异常！");
		    	         		    }
		    	         	          
		    	         	   },
		    	         	   error: function(){
		    	         		  alert("检测控制器失败！");
		    	               }
		    	         	 });
		    	         	 //end
    	     });
    	     
    	     
    	   
    	     //上传设置
    	     $("#bt6").click(function(){
	    		   var doorArr = getvalue();
	    		   var map ={};
	    		   map.doorArr = doorArr;
	    		   $.ajax({
		    	         	type: "post",
		    	         	   url: context+"/uploadReset",
		    	         	    contentType: "application/json;charset=utf-8;",
		    	         	  data:JSON.stringify(map),
		    	         	  dataType:"json",//注意不是datatype哦
		    	         	    async: false,//使用同步操作，否则init方法执行时setting可能还未被赋值
		    	         	   success: function(data) {
		    	         		  console.log(data);
		    	         		    if(data.code==200){
		    	         		    	 alert("上传设置成功！");
		    	         		    }else{
		    	         		    	alert("上传设置异常！");
		    	         		    }
		    	         	         
		    	         	  },
		    	         	 error: function(){
		    	         		  alert("上传设置失败！");
		    	              }
		    	         	 
		    	         	 });  
		    	         	 //end
		    	         	 
    	    });
    	     
    	     
     
    	 $("#bt8").click(function(){
        	// alert("脚本执行");
        	 //查询控制器
        	 queryctl();
       	     
        });
    	
    	 
    	 $("#bt1").click(function(){
         //	 alert("全选执行");
         	$("input[name='checkbox1']").prop("checked",true);
        	     
         });
    	 
    	
    	 //点击实时监控 停止按钮隐藏
    	
    	 $("#bt2").click(function(){
        	 //alert("开始监控");
        	 
        	   var doorArr = getvalue();
	    		   var map ={};
	    		   map.doorArr = doorArr;
	    		//   alert(doorArr);
	    		   $.ajax({
		    	         	type: "post",
		    	         	   url: context+"/watchController",
		    	         	    contentType: "application/json;charset=utf-8;",
		    	         	  data:JSON.stringify(map),
		    	         	  dataType:"json",//注意不是datatype哦
		    	         	    async: false,//使用同步操作，否则init方法执行时setting可能还未被赋值
		    	         	   success: function(data) {
		    	         		  console.log(data);
		    	         		    if(data.code==200){
		    	         		    	 alert("正在监控");
		    	         		    	 
		    	         		    	 //监控绿色
		    	         	        	  //$("#bt2").attr("class", "green");
		    	         	        	 $("#bt2").removeClass("btn-primary");
		    	         	        	 $("#bt2").addClass("green11");
		    	         	        	 //停止为红色
		    	         	        	// $("#bt3").hide();
		    	         	        	 //	$("#bt3").attr("class", "red");
		    	         	           	 $("#bt3").removeClass("btn-primary");
		    	         	        	 $("#bt3").addClass("red11");
		    	         	        	 //重新点击按钮时，切换为监控状态
		    	         	        	 
		    	         	        	 //表格显示
		    	         	          // $("#minitortable").html("");
		    	         	        	 showflag=true;
		    	         	        	 
		    	         		    }else{
		    	         		    	alert("监控异常！");
		    	         		    }
		    	         	         
		    	         	  },
		    	         	 error: function(){
		    	         		  alert("监控失败！");
		    	              }
		    	         	 
		    	         	 });  
		    	         	 //end
		    	         	 
        	
        	 
        });
    	
    	//点击停止按钮，监控显示
    	 $("#bt3").click(function(){
        	/// alert("停止");
        	 //红色消失，
        	 //$("#bt3").removeClass(red11);
          	 $("#bt3").removeClass("red11");
        	 $("#bt3").addClass("btn-primary");
        	 
        	 //$("#bt2").removeClass();
           	 $("#bt2").removeClass("green11");
        	 $("#bt2").addClass("btn-primary");
        	 $("#bt3").show();
        	 $("#bt2").show();
        	 showflag=false;
        	
        });
    });
    

    function getvalue(){
   	 var vals =[];//定义一个数组
        $.each($('input:checkbox:checked'),function(){
            vals.push($(this).val());
        });
        return vals;
    }
    
    function   queryctl(){  
 		//  alert(" 查询控制器信息,请稍等...");
 	     //获取信息
 	       var ctl= $("#ctl").val();
 	       var zoneid= $("#hid_zoonid").val();
 	      
 	     //发送ajax请求
 	       $.ajax({
         url: _ctx+"/rdp/door/door/query",
         type: 'get',
         data : {ctl : ctl,zoneid:zoneid}, //参数：当前页为1
         async: false,
         success: function (data) {
         	       console.log(data);
         	    		   
 					   appendHtml2(data);
         	      
         },
         error: function (e) {
             alert(e.msg);
         }
     });
 	     //结果赋值
 		      }  
    
    function appendHtml2(returnData) {//此函数用于处理后台返回的数据，根据自己需求来实现页面拼接
  	  var objs = $.parseJSON( JSON.stringify(returnData));
    
     //清空一个DIV里面的内容
      $(InputsWrapper).html("");
      $(objs).each(function () {
         
           var objA=objs.rows;   
           console.log(objA);
           if(objA!=null){
        	   for(var i=0;i<objA.length;i++){
            	   FieldCount=objA[i]['doorno'];
            	   doornames=objA[i]['doorname'];
            	   // <input type="checkbox" id="ck3" value="133118548-3">
            	   $(InputsWrapper).append('<input type="checkbox" name="checkbox1" id="ck_'+ FieldCount +'" value="'+ FieldCount +'"/>');
                   $(InputsWrapper).append('<input type="button" name="mytext[]" id="field_'+ FieldCount +'" value="'+ doornames +'"/>');
            	                             //    <input id="door1" type="button"  value="1号门"/>
               }
           }
      });
  }

    function showdoor(strs){
     //   alert("替换字符串");
        var str=strs.split("_");
        return str[1];
    }

    </script>
    <script type="text/javascript" src="${ctx}/js/plugins/json/json2.min.js" ></script>
    <%--<script type="text/javascript">
        document.write("<script type='text/javascript' src='${ctx}/js/gpoint/rdp/monitoring/monitoring.js?rn=?"+Math.random()+"'>"+"<script>");
    </script>--%>
<script type="text/javascript"
	src="${ctx}/js/gpoint/rdp/monitoring/monitoring.js"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:170px;padding:10px">
    <div id="p" class="easyui-panel" title="操作功能" >

         <div class="toolbar-box">     			
				<div class="buttons">
					 <a id="bt1" class="btn btn-primary " href="javascript:void(0);" ><span class ="mySpan">全选</span></a>
					 <a id="bt2" class="btn btn-primary " href="javascript:void(0);" ><span class ="mySpan">实时监控</span></a>
					 <a id="bt3" class="btn btn-primary " href="javascript:void(0);" ><span class ="mySpan">停止</span></a>
					 <a id="bt4" class="btn btn-primary " href="javascript:void(0);" ><span class ="mySpan">检测监控器</span></a>
					 <a id="bt5" class="btn btn-primary " href="javascript:void(0);" ><span class ="mySpan">校准时间</span></a>
					 <a id="bt6" class="btn btn-primary " href="javascript:void(0);" ><span class ="mySpan">上传设置</span></a>
					 <a id="bt7" class="btn btn-primary " href="javascript:void(0);" ><span class ="mySpan">远程开门</span></a>
					
					  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <font style="font-size: large">区  域:</font>
            <!-- <table>
              <tr> -->
               <!--   <td>  -->
                 <input  name="m:doorController:zoneid" type="hidden"   id="hid_zoonid" value="${doorController.zoneid}"/>	
                <!--  					    </td>
                 <td>  -->
                 <input style="width:130px;height:20px;" type="text" data-key="#hid_zoonid" readonly="readonly"  class="form-control comboTree" data-toggle="dictionary" data-url="${ctx}/rdp/area/zone/list_json_tree.htm?" value="${doorController.zonename}"  validate="{required:true}"/>
                <!--  </td> -->
              
          <!--     </tr>
            </table> -->
              
        
              <!--  <inputtype="button" value="查询"/> -->
                <button  id="bt8" name="bt8" style="font-size: large">查询</button>
			    </div>
	    </div><!--/ 查询条件-->
    
    
       
        <div id="InputsWrapper" style="height:50px;padding:10px;margin:3px 0;">
           <%--  <input type="checkbox" id="ck1" value="133118548-1"><input id="door1" type="button" src="${ctx}/images/close.png" value="1号门"/>
            <input type="checkbox" id="ck2" value="133118548-2"><input id="door2" type="button" src="${ctx}/images/close.png" value="2号门"/>
            <input type="checkbox" id="ck3" value="133118548-3"><input id="door3" type="button" src="${ctx}/images/close.png" value="3号门"/>
            <input type="checkbox" id="ck4" value="133118548-4"><input id="door4" type="button" src="${ctx}/images/close.png" value="4号门"/> --%>
        </div>
    </div>
</div>
<%--<div data-options="region:'west',split:true,title:''" style="width:350px;padding:10px;">
</div>--%>
<div data-options="region:'center',title:''">
 <table class="table"  id="minitortable">
        <thead>
            <tr>
             <!--    <th>序号</th> -->
                <th>执行时刻</th>
                <th>描述</th>
                <th>卡号</th>
                <th>状态</th>
               
            </tr>
        </thead>
        <tbody id="trlist">
           <!--  <tr id="tr">
                <td><input type="checkbox" name="checkbox"/></td>
                <td><input id="text1" type="text"/></td>
                <td><input id="text2" type="text"/></td>
                <td><input id="text3" type="text"/></td>
                <td><input id="text4" type="text"/></td>
               
            </tr> -->
            
            
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
               
               
            </tr>
        </tbody>
    </table>
</div>



</body>
</html>